import "./index.css"; // 组件的样式
import ReactECharts from "echarts-for-react";
import { useEffect, useState } from "react";
import dayjs from "dayjs";
import { getSignInListUsingGet } from "@/api/userController";

// 组件接收的参数
interface Props {}

// 根据参数返回组件渲染的结果
const CalendarChart = (props: Props) => {
  const [signInList, setSignInList] = useState<number[]>();

  const year = new Date().getFullYear();

  const fetchSignInList = async () => {
    try {
      const res = await getSignInListUsingGet({ year });
      setSignInList(res.data);
    } catch (e) {}
  };

  useEffect(() => {
    fetchSignInList();
  }, []);

  const optionDate = signInList?.map((day, index) => {
    const dateStr = dayjs(`${year}-01-01`)
      .add(day - 1, "day")
      .format("YYYY-MM-DD");
    return [dateStr, 1];
  });

  const option = {
    title: {
      top: 50,
      left: "center",
      text: `${year}年刷题记录`,
    },
    visualMap: {
      min: 0,
      max: 1,
      show: false,
      inRange: {
        color: ["#efefef", "lightGreen"],
      },
    },
    calendar: {
      top: 120,
      left: 30,
      right: 30,
      cellSize: ["auto", 13],
      range: year,
    },
    series: {
      type: "heatmap",
      coordinateSystem: "calendar",
      data: optionDate,
    },
  };

  // 返回渲染后的结果
  return (
    <div className="calendar-chart">
      <ReactECharts option={option} />
    </div>
  );
};

export default CalendarChart;
